<!-- Tab1 查询(列表):Tab2 操作(表头+列表，刷新 +提交) 表格可编辑 -->
<template>
  <el-scrollbar>
    <el-tabs class="my-sub-tabs" type="border-card" v-model="activeTab">
      <el-tab-pane v-for="tab in tabs" :key="tab.label" :label="tab.label" :name="tab.name">
        <component
          :is="tab.component"
          :data="{ groupName: data.groupName, jobType: data.jobType, operType }"
          :key="data.jobType"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { computed, defineProps, markRaw, onBeforeUnmount, reactive, ref } from 'vue'
import List from './component/list/Index.vue'
import TemplateOP2 from '@/template/detail/templateOP2/Index.vue'

const comObj = reactive({
  list: markRaw(List),
  op2: markRaw(TemplateOP2)
})

//定义接收的props
const props = defineProps({
  // 定义一个对象类型的 prop
  data: {
    type: Object,
    default: () => ({ groupName: '', jobType: '' })
  }
})

const jobType = computed(() => {
  return props.data.jobType
})

const tabs = ref([
  {
    name: 'list',
    label: '列表',
    component: comObj['list']
  }
])

const operType = ref('')
const activeTab = ref('list')
//添加标签页
const addTab = (info: any) => {
  const { label, data, value } = info
  operType.value = value
  const tabExists = tabs.value.some((tab) => tab.name === 'op2')
  if (!tabExists) {
    tabs.value.push({
      name: 'op2',
      label: label,
      component: comObj['op2']
    })
  }
  //更新激活的标签页
  activeTab.value = 'op2'
  //将当前行信息存储到sessionStorage
  sessionStorage.setItem('WMS_OP2_ROW_DATA', JSON.stringify(data))
}

import eventBus from '@/libs/eventBus'
// 启用侦听
eventBus.on(`addOP2DetailTab-${jobType.value}`, addTab)
// 在组件卸载之前移除侦听
onBeforeUnmount(() => {
  eventBus.off(`addOP2DetailTab-${jobType.value}`, addTab)
})
</script>

<!-- <style scoped lang="less">
:deep(.my-sub-tabs .el-tabs__content) {
  height: calc(100vh - 180px);
  overflow-y: scroll;
}
</style> -->
